import React, { useState } from "react";
import SwitchDark from "../../../../components/SwitchDark";
import type { RootState } from "../../../../store";
import { setThemeConfig } from '../../../../store/modules/global'
import { updateCollapse } from '../../../../store/modules/menu'
import { Divider, Drawer, Switch } from 'antd'
import { useDispatch, useSelector } from "react-redux";

const Theme = () => {
  const [visible, setVisible] = useState(false)
  const { themeConfig } = useSelector((state: RootState) => state.global)
  const { weakOrGray, breadcrumb, tabs } = themeConfig
  const { isCollapse } = useSelector((state: RootState) => state.menu)

  const dispatch = useDispatch()

  const setWeakOrGray = (checked: boolean, theme: string) => {
    if (checked) return dispatch(setThemeConfig({
      ...themeConfig,
      weakOrGray: theme
    }));
    dispatch(setThemeConfig({
      ...themeConfig,
      weakOrGray: ''
    }));
  }

  const onChange = (checked: boolean, keyName: string) => {
    return dispatch(setThemeConfig({
      ...themeConfig,
       [keyName]: checked
    }));
  }

  return (
    <React.Fragment>
      <i className="iconfont icon-style icon-zhuti" onClick={() => setVisible(true)} />
      <Drawer
        title="布局设置"
        width={320}
        destroyOnClose
        closable={false}
        open={visible}
        onClose={() => setVisible(false)}
      >
        <Divider className="divider">全局主题</Divider>
        <div className="theme-item">
          <span>暗黑模式</span>
          <SwitchDark />
        </div>
        <div className="theme-item">
          <span>灰色模式</span>
          <Switch checked={ weakOrGray === 'gray' } onChange={(e) => setWeakOrGray(e, 'gray')} />
        </div>
        <div className="theme-item">
          <span>色弱模式</span>
          <Switch checked={ weakOrGray === 'weak' } onChange={(e) => setWeakOrGray(e, 'weak')} />
        </div>
        
        <Divider className="divider">界面设置</Divider>
        <div className="theme-item">
          <span>折叠菜单</span>
          <Switch 
            checked={ isCollapse } 
            onChange={(e) => dispatch(updateCollapse(e))} />
        </div>
        <div className="theme-item">
          <span>面包屑导航</span>
          <Switch 
            checked={ !breadcrumb } 
            onChange={(e) => onChange(e, 'breadcrumb')} />
        </div>
        <div className="theme-item">
          <span>标签栏</span>
          <Switch 
            checked={ !tabs } 
            onChange={(e) => onChange(e, 'tabs')} />
        </div>
        <div className="theme-item">
          <span>页脚</span>
          <Switch 
            checked={ !themeConfig.footer } 
            onChange={(e) => onChange(e, 'footer')} />
        </div>
        </Drawer>
    </React.Fragment>
  )
}

export default Theme